<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body>
            <div class="content">
                <div class="row">
                    <div class="col-sm-7 col-6">
                        <h4 class="page-title">个人画像</h4>
                    </div>

                    <div class="col-sm-5 col-6 text-right m-b-30">
                        <a href="edit-profile.html" class="btn btn-primary btn-rounded"><i class="fa fa-plus"></i> 编辑画像</a>
                    </div>
                </div>
                <div class="card-box profile-header">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="profile-view">
                                <div class="profile-img-wrap">
                                    <div class="profile-img">
                                        <a href="#"><img id="doctor_img" class="avatar" src="assets/img/" alt=""/></a>
                                    </div>
                                </div>
                                <div class="profile-basic">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="profile-info-left">
                                                <h3 class="user-name m-t-0 mb-0" id="employeeName"></h3>
                                                <small class="text-muted" id="role"></small>
                                                <div class="staff-id">员工编号 : <span id="employeeId"></span></div>
                                                <div class="staff-msg"><a href="chat.html" class="btn btn-primary">发送消息</a></div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <ul class="personal-info">
                                                <li>
                                                    <span class="title">电话:</span>
                                                    <span class="text"><a href="" id="mobile">770-889-6484</a></span>
                                                </li>
                                                <li>
                                                    <span class="title">Email:</span>
                                                    <span class="text"><a href=""><span class="__cf_email__" data-cfemail="" id="email"></span></a></span>
                                                </li>
                                                <li>
                                                    <span class="title">生日:</span>
                                                    <span class="text" id="birthday"></span>
                                                </li>
                                                <li>
                                                    <span class="title">地址:</span>
                                                    <span class="text" id="address"></span>
                                                </li>
                                                <li>
                                                    <span class="title">性别:</span>
                                                    <span class="text" id="gender"></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>                        
                        </div>
                    </div>
                </div>
				<div class="profile-tabs">
					<ul class="nav nav-tabs nav-tabs-bottom">
						<li class="nav-item"><a class="nav-link active" href="#about-cont" data-toggle="tab">相关资料</a></li>
						<li class="nav-item"><a class="nav-link" href="#bottom-tab2" data-toggle="tab">Profile</a></li>
						<li class="nav-item"><a class="nav-link" href="#bottom-tab3" data-toggle="tab">Messages</a></li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane show active" id="about-cont">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card-box">
                            <h3 class="card-title">教育经历</h3>
                            <div class="experience-box">
                                <ul class="experience-list" id="edu">
                                </ul>
                            </div>
                        </div>
                        <div class="card-box mb-0">
                            <h3 class="card-title">工作履历</h3>
                            <div class="experience-box">
                                <ul class="experience-list" id="work">                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
						</div>
						<div class="tab-pane" id="bottom-tab2">
							Tab content 2
						</div>
						<div class="tab-pane" id="bottom-tab3">
							Tab content 3
						</div>
					</div>
				</div>
            </div>
            
    <div class="sidebar-overlay" data-reff=""></div>
    
	<script src="assets/js/jquery-3.2.1.min.js"></script>
	<script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.slimscroll.js"></script>
    <script src="assets/js/app.js"></script>
	<!--json data-->
	<script type="text/javascript" src="json/profile.json"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		for(key in proile){
			$("#" + key).html(proile[key]);
		}
		$("#doctor_img").attr("src", $("#doctor_img").attr("src") + proile.doctor_img);
		
		var eduStr = "";
		for(var i = 0; i < proile.edu.length; i++){
			eduStr = eduStr + '<li>';
            eduStr = eduStr + '<div class="experience-user">';
            eduStr = eduStr + '<div class="before-circle"></div>';
            eduStr = eduStr + '</div>';
            eduStr = eduStr + '<div class="experience-content">';
            eduStr = eduStr + '<div class="timeline-content">';
            eduStr = eduStr + '<a href="#/" class="name">'+ proile.edu[i].school +'</a>';
            eduStr = eduStr + '<div>'+ proile.edu[i].profession +'</div>';
            eduStr = eduStr + '<span class="time">'+ proile.edu[i].time +'</span>';
            eduStr = eduStr + '</div></div></li>';
		}
		$("#edu").html(eduStr);
		
		var workStr = "";
		for(var i = 0; i < proile.work.length; i++){
			workStr = workStr + '<li>';
            workStr = workStr + '<div class="experience-user">';
            workStr = workStr + '<div class="before-circle"></div>';
            workStr = workStr + '</div>';
            workStr = workStr + '<div class="experience-content">';
            workStr = workStr + '<div class="timeline-content">';
            workStr = workStr + '<a href="#/" class="name">'+ proile.work[i].company +'</a>';
			workStr = workStr + '<div>'+ proile.work[i].post +'</div>';
            workStr = workStr + '<span class="time">'+ proile.work[i].time +'</span>';
            workStr = workStr + '</div></div></li>';
		}
		$("#work").html(workStr);
	});
	</script>
</body>

</html>